<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#ffffff',
		navigationBarTextStyle: 'black',
		backgroundColor: '#FFFFFF',
		navigationBarTitleText: '倍阅共读计划',
	},
}
</route>
<template>
	<view class="page-class">
		<view index="14" class="block-4">
			<view class="staudenDetails_topLeftBox">
				<text index="13" class="caption-7 font-bold">{{ planInfoDetail.title }}</text>
				<image
					class="staudenDetails_topRightBox_image"
					v-if="planInfoDetail.list.length > 0"
					:src="baseImg + '/gdjh_sjIcon.png'"
					@tap="
						linkUrl(
							'/pages/class/completeBillboard/index?id=' +
								planInfoDetail.list[0].plan_id +
								'&class_id=' +
								planInfoDetail.list[0].class_id +
								'&is_teacher=' +
								1,
						)
					"
				/>
				<view class="title-6">
					<text index="12" class="title-7">{{ getPlanStatusToTex(planInfoDetail.status) }}</text>
					<text index="12" class="title-8">{{
						dayjs(planInfoDetail.start_time * 1000).format('YYYY年MM月DD日') +
						' - ' +
						dayjs(planInfoDetail.end_time * 1000).format('YYYY年MM月DD日')
					}}</text>
				</view>
			</view>

			<view
				class="beiyueDetailsBox"
				v-for="(item, index) in planInfoDetail.list"
				:key="index"
				@tap="
					linkUrl(
						`/pages/pages-readingPlan/partici-record/index?id=${item.plan_id}&avatar=${item.avatar}&class_name=${item.class_name}&complete_total=${item.complete_total}&nojoin_total=${item.total - item.join_total}&join_total=${item.join_total}&progress=${item.progress}`,
					)
				"
			>
				<view class="w-full flex justify-between items-center">
					<view class="flex justify-between items-center">
						<image
							class="w-[105rpx] h-[105rpx] rounded-[50%] mr-1"
							style="border: #fff 5rpx solid"
							:src="item.avatar || baseImg + '/tabbar/myS.png'"
						></image>
						<view class="flex flex-col">
							<text class="text-[#303030] text-[29rpx] font-bold">{{ item.class_name }}</text>
							<view class="flex items-center">
								<text class="text-[22rpx] text-[#34A4E2]">{{ item.join_total }}人已参与</text>
								<text class="text-[22rpx] text-[#919191] ml-[10rpx]"
									>{{ item.total - item.join_total }}人待参与</text
								>
								<text class="text-[22rpx] text-[#46C853] ml-[10rpx]"
									>{{ item.complete_total }}人已完成</text
								>
							</view>
						</view>
					</view>
					<view class="flex justify-end items-center">
						<view class="flex flex-col justify-between">
							<view index="32" class="wrapper-4">
								<text index="27" class="title-5">{{ item.progress }}%</text>
								<text index="28" class="caption-2">完成率</text>
							</view>
						</view>
						<image index="9" :src="baseImg + '/gengduo.png'" class="icon-right-3" />
					</view>
				</view>
			</view>

			<!-- <view class="beiyueDetailsBox">
				<view class="w-full flex justify-between items-center">
					<view class="flex justify-between items-center">
						<image
							class="w-[105rpx] h-[105rpx] rounded-[50%] mr-1"
							:src="baseImg + '/tabbar/myS.png'"
						></image>
						<view class="flex flex-col">
							<text class="text-[#303030] text-[29rpx]">阅读兴趣班</text>
							<view class="flex items-center">
								<text class="text-[22rpx] text-[#34A4E2]">15人已参与</text>
								<text class="text-[22rpx] text-[#919191] ml-[10rpx]">12人待参与</text>
								<text class="text-[22rpx] text-[#46C853] ml-[10rpx]">3人已完成</text>
							</view>
						</view>
					</view>
					<view class="flex justify-end items-center">
						<view class="flex flex-col justify-between">
							<view index="32" class="wrapper-5">
								<text index="27" class="title-5">No.16</text>
								<text index="28" class="caption-2">完成率100%</text>
							</view>
						</view>
						<image index="9" :src="baseImg + '/gengduo.png'" class="icon-right-3" />
					</view>
				</view>
			</view> -->
		</view>

		<view index="14" class="block-5">
			<view class="text-[#303030] text-[33rpx] font-bold w-[100%]" style="float: left"
				>共读书目</view
			>
			<view
				class="w-[202rpx] mt-[25rpx] mr-[25rpx]"
				style="float: left"
				v-for="(item, index) in bookList"
				:key="index"
				@tap="linkUrl(`/pages-book/details/index?id=${item.id}`)"
			>
				<image
					class="w-full h-[250rpx] rounded-[40rpx]"
					style="float: left"
					:src="item.cover_img || baseImg + '/img-shangcixuedao.png'"
				></image>
				<text
					class="text-[#303030] inline-block w-full text-[25rpx] mt-1 font-bold truncate"
					style="float: left; text-align: center"
					>{{ item.name }}</text
				>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { usePlanStore, useUserStore } from '@/store';
import useChangeTabbar from '@/hooks/useChangeTabbar';
import { systemInfo } from '@/utils/getSystemInfo';
import { getPlanDetailBookListApi, getPlanInfoDetailApi } from '@/service/plan';
import { initializeApp, getPlanStatusToTex } from '@/utils';
import dayjs from 'dayjs';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const planStore = usePlanStore();
const { planInfo } = storeToRefs(planStore);

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);

const planId = ref(0);

const linkUrl = (url = '') => {
	if (!url) return;
	uni.navigateTo({ url });
};
const planInfoDetail: any = ref();
const getPlanInfoDetail = async () => {
	try {
		const res = await getPlanInfoDetailApi(planId.value);
		if (res.status_code === 200) {
			const resData = res.data;
			planInfoDetail.value = resData;
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		uni.hideLoading();
	}
};
const bookList: any = ref();
const getPlanDetailBookList = async () => {
	try {
		const res = await getPlanDetailBookListApi(planId.value);
		if (res.status_code === 200) {
			const resData: any = res.data;
			bookList.value = resData.list;
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		uni.hideLoading();
	}
};

onLoad(option => {
	planId.value = option.plan_id;
});
onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	initializeApp(getPlanInfoDetail(), getPlanDetailBookList());
});
</script>
<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}

.block-4 {
	display: inline-block;
	float: left;
	height: auto;
	width: 700rpx;
	padding: 32rpx 0;
	margin: 30rpx 0 30rpx 25rpx;
	background-color: #fdffff;
	border-radius: 31.25rpx;
	box-shadow: 0 4.8rpx 20.8rpx rgba(0, 0, 0, 0.07);

	.staudenDetails_topLeftBox {
		width: 100%;

		.caption-7 {
			width: calc(100% - 22rpx);
			margin-left: 22rpx;
			overflow: hidden;
			font-size: 36rpx;
			font-style: normal;
			line-height: 54rpx;
			color: rgb(48 48 48 / 100%);
			text-align: left;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.staudenDetails_topRightBox_image {
			width: 60rpx;
			height: 60rpx;
			float: right;
			margin-right: 30rpx;
			margin-top: 30rpx;
		}

		.title-6 {
			width: calc(100% - 105rpx);
			overflow: hidden;
			text-align: left;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-left: 22rpx;
			margin-top: 10rpx;
		}
		.title-7 {
			font-size: 25rpx;
			font-style: normal;
			line-height: 50rpx;
			height: 50rpx;
			border-radius: 10rpx;
			padding: 0 20rpx;
			background-color: #2ba5e0;
			color: #fff;
			float: left;
		}
		.title-8 {
			margin-left: 10rpx;
			font-size: 26rpx;
			font-style: normal;
			line-height: 50rpx;
			color: #909090;
			float: left;
		}
	}

	.beiyueDetailsBox {
		width: calc(100% - 88rpx);
		margin: 22rpx 22rpx 0;
		background-color: #f3f3f5;
		padding: 28rpx 22rpx;
		border-radius: 10rpx;
	}

	.container-4 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 640rpx;
		padding: 20rpx 8.3rpx;
		margin-top: 33.4rpx;
		background-color: rgb(249 249 249 / 100%);
		border-radius: 31.2rpx;
	}

	.layer-1 {
		align-self: center;
		width: 24.3rpx;
		height: 9rpx;
		background-color: rgb(143 144 146 / 100%);
		border-radius: 3.4rpx;
	}

	.mask-1 {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.4rpx;
	}

	.overlayer-1 {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.4rpx;
	}
}

.block-5 {
	display: inline-block;
	float: left;
	height: auto;
	width: 678rpx;
	padding: 42rpx 0 42rpx 22rpx;
	margin: 30rpx 0 30rpx 25rpx;
	background-color: rgb(253 255 255 / 100%);
	border-radius: 31.25rpx;
	box-shadow: 0 4.8rpx 20.8rpx 0 rgb(0 0 0 / 7%);
}

.wrapper-4 {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-self: flex-start;
	width: 110rpx;
	height: 110rpx;
	padding: 0;
	background-color: #2ba5df;
	border-radius: 110rpx;
	overflow: hidden;
}
.wrapper-5 {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-self: flex-start;
	width: 110rpx;
	height: 110rpx;
	padding: 0;
	border-radius: 110rpx;
	background-color: #fccb26;
	overflow: hidden;
}
.title-5 {
	align-self: center;
	overflow: hidden;
	font-size: 24rpx;
	font-style: normal;
	line-height: 40rpx;
	margin-top: 22rpx;
	color: #fff;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.caption-2 {
	align-self: center;
	overflow: hidden;
	font-size: 22rpx;
	font-style: normal;
	line-height: 25rpx;
	color: #fff;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.icon-right-3 {
	align-self: center;
	width: 25rpx;
	height: 22.9rpx;
	margin: 0 0 2.1rpx 10rpx;
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
</style>
